import React, { Component } from 'react';
import {Progress,Button} from 'iftide';
import {View} from 'react-native'

export default class Basic3 extends Component{
    constructor(props) {
        super(props);
        this.state = {
            percent: 70,
            isShow:false,
            modalTitle:'下载中'
        }
    }
    // 动态进度
    percent=()=>{
      let timer=  setInterval(()=>{
            this.setState({
                percent:this.state.percent+1
            })
            if(this.state.percent>=100) {
                this.setState({
                    modalTitle:'已完成'
                })
                clearInterval(timer)
            }
        },1000)
    }
    componentDidMount(){
        this.percent()
    }
    onClick=()=>{
        //this.progress._open();
        this.setState({
            isShow:!this.state.isShow
        })
    }

    onClose=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    render() {
        return (
            <View>
                
                <Button title={'模态框直线进度条'} onPress={() => this.onClick()}/>
                <Progress
                    isShow={this.state.isShow}
                    percent={this.state.percent}
                    width={254}
                    containerStyle={{height:87}}
                    bgcolor={'#FA5050'}
                    isModal={true}
                    ModalClose={false}
                    modalTitle={this.state.modalTitle}
                    onClose={()=>{this.onClose()}}
                />
            </View>
        );
    }
}